<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>账单详细</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" align="center" >
  <div data-role="header">
  <h1>账单详细</h1>
  <a href="ownerQuery.do?method=opinion&id=${owner.id }" data-role="button" data-icon="star" class="ui-btn-right">意见反馈</a>
  </div>

  <div data-role="content" >
${bill.year }年${bill.month }月账单&nbsp;&nbsp;
<c:if test="${bill.isPaid eq 0 }"><img src="images/nopaid.png" alt="未支付" width="16" height="16" class="ui-li-icon"><font color="red">未支付</font></c:if>
<c:if test="${bill.isPaid eq 1 }"><img src="images/paid.png" width="16" height="16" class="ui-li-icon" >已支付</c:if><p>  
<font size="2">  
  <div class="ui-grid-d" style="height: 30px">
  <div class="ui-block-a" style="width: 25%">
收费项目
  </div>
  <div class="ui-block-b" style="width: 20%">
起止码数
  </div>
  <div class="ui-block-c" style="width: 20%">
数量单位
  </div>
  <div class="ui-block-d" style="width: 20%">
收费标准
  </div>
   <div class="ui-block-e" style="width: 15%">
金额
  </div>
  </div>
<c:if test="${!empty recordList}">
<c:forEach items="${recordList}" var="record">
  <div class="ui-grid-d" style="height: 30px">
  
  <div class="ui-block-a" style="width: 25%">
	<c:choose>
	<c:when test="${record.chargeItem.itemId eq '2'}">
	&nbsp;物业服务费
	</c:when>
	<c:when test="${record.chargeItem.itemId eq '3' and power2Volume ne 0 and isHistoryBill eq 0}">
	&nbsp;电费1
	</c:when>
	<c:when test="${record.chargeItem.itemId eq '4' and water2Volume ne 0 and isHistoryBill eq 0}">
	&nbsp;水费1
	</c:when>							
	<c:otherwise>
	&nbsp;${record.chargeItem.name }
	</c:otherwise>
	</c:choose>
  </div>
  
  <div class="ui-block-b">
  <c:choose>
  <c:when test="${record.chargeItem.itemId eq '3'}">
  ${powerBegin }&nbsp;${powerEnd }
  </c:when>
  <c:when test="${record.chargeItem.itemId eq '4'}">
  ${waterBegin }&nbsp;${waterEnd }
  </c:when>
  <c:when test="${record.chargeItem.itemId eq '8'}">
  ${waterBegin }&nbsp;${waterEnd }
  </c:when>
  </c:choose>
  </div>
  
  <div class="ui-block-c"  >
  <c:choose>
  <c:when test="${record.chargeItem.itemId eq '1'}">
  <fmt:formatNumber value="${bill.house.area }" pattern="0.00" />
  </c:when>
  <c:when test="${record.chargeItem.itemId eq '2'}">
  1.00
  </c:when>
  <c:when test="${record.chargeItem.itemId eq '3'}">
  ${powerVolume }
  </c:when>
  <c:when test="${record.chargeItem.itemId eq '4'}">
  ${waterVolume }
  </c:when>
  <c:when test="${record.chargeItem.itemId eq '8'}">
  ${waterVolume }
  </c:when>
  <c:otherwise>
  1
  </c:otherwise>
  </c:choose>
  </div>
  
  <div class="ui-block-d">
	<fmt:formatNumber value="${record.chargeCriterion.amount }" pattern="0.00" />
  </div>
  
  <div class="ui-block-e" style="width: 15%">
  <c:choose>
  <c:when test="${record.chargeItem.itemId eq '3' and power2Volume ne 0 }">
  <fmt:formatNumber value="${record.chargeCriterion.amount * powerVolume }" pattern="#.00" />
  </c:when>
  <c:when test="${record.chargeItem.itemId eq '4' and water2Volume ne 0 }">
  <fmt:formatNumber value="${record.chargeCriterion.amount * waterVolume }" pattern="#.00" />
  </c:when>
  <c:otherwise>
  <fmt:formatNumber value="${record.wantMoney }" pattern="#.00" />
  </c:otherwise>
  </c:choose>
  </div>
</div>

<c:if test="${record.chargeItem.itemId eq '3' and power2Volume ne 0}">
<div class="ui-grid-d" style="height: 30px">
  <div class="ui-block-a" style="width: 25%">
电费2
  </div>
  <div class="ui-block-b">
${power2Begin }&nbsp;${power2End }
  </div>
  <div class="ui-block-c">
${power2Volume }
  </div>
  <div class="ui-block-d">
<fmt:formatNumber value="${record.chargeCriterion.amount }" pattern="0.00" />
  </div>
   <div class="ui-block-e" style="width: 15%">
<fmt:formatNumber value="${record.chargeCriterion.amount * power2Volume }" pattern="#.00" />
  </div>
  </div>
</c:if>

<c:if test="${record.chargeItem.itemId eq '4' and water2Volume ne 0}">  
<div class="ui-grid-d" style="height: 30px">
  <div class="ui-block-a" style="width: 25%">
水费2
  </div>
  <div class="ui-block-b">
${water2Begin }&nbsp;${water2End }
  </div>
  <div class="ui-block-c">
${water2Volume }
  </div>
  <div class="ui-block-d">
<fmt:formatNumber value="${record.chargeCriterion.amount }" pattern="0.00" />
  </div>
   <div class="ui-block-e" style="width: 15%">
<fmt:formatNumber value="${record.chargeCriterion.amount * water2Volume }" pattern="#.00" />
  </div>
  </div>
</c:if>
</c:forEach>
</c:if>  

<div class="ui-grid-d">
  <div class="ui-block-a">
  </div>
  <div class="ui-block-b">
  </div>
  <div class="ui-block-c">
  </div>
  <div class="ui-block-d">
合计：
  </div>
   <div class="ui-block-e">
<fmt:formatNumber value="${bill.amount }" pattern="#.00" />
  </div>
  </div>
</font>  
</div>

<div data-role="footer" data-position="fixed" data-fullscreen="true">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="ownerQuery.do?method=toSearchBill&id=${owner.id }"" data-role="button" data-icon="search">搜索账单</a>
  </div>
</div>
</div> 
</body>
</html>